<template>
  <div id="box1">
    <div id="top">
      <div id="top-left"></div>
      <div id="top-center">学生可视化大屏</div>
      <div>
    <button @click="gotoLogin()">后台</button>
  </div>
      <div id="top-right"></div>
    </div>
    <div id="bottom">
      <div id="left">
        <div id="left-top">
          <div id="l-t-head">
            <headStyle headText="班级人数条形图"></headStyle>
          </div>
          <div id="l-t-content">

          </div>
          <div id="l-t-food"><foodStyle></foodStyle></div>
        </div>
        <div id="left-bottom">
          <div id="l-b-head">
            <headStyle headText="各班级人数占比"></headStyle>
          </div>
          <div id="l-b-content">

            <div id="l-b-con-bottom"></div>
          </div>
          <div id="l-b-food"><foodStyle></foodStyle></div>
        </div>
      </div>
      <div id="center">
        <div id="center-top">
          <div id="title1" class="C-T-t"></div>
          <div id="title2" class="C-T-t"></div>
          <div id="title3" class="C-T-t"></div>
        </div>
        <div id="center-bottom">
          <div id="c-b-head"><head2Style></head2Style></div>
          <div id="c-b-content"></div>
          <div id="c-b-food"><foodStyle></foodStyle></div>
        </div>
      </div>
      <div id="right">
        <div id="right-top">
          <div id="r-t-head"><headStyle headText="模块3"></headStyle></div>
          <div id="r-t-content">

          </div>
          <div id="r-t-food"><foodStyle></foodStyle></div>
        </div>
        <div id="right-bottom">
          <div id="r-b-head"><headStyle headText="模块4"></headStyle></div>
          <div id="r-b-content">

          </div>
          <div id="r-b-food"><foodStyle></foodStyle></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chinaMap from "../assets/china.json";
import foodStyle from "../components/food.vue";
import headStyle from "../components/head.vue";
import head2Style from "../components/head2.vue";
import titleStyle from "../components/title.vue";

import { countryData,Data2 } from "../resource/countryApi";

import * as echarts from "echarts"; //引入echarts 插件;
//调用封装在resource文件夹里面的echarts.js里定义的方法
import { bar1, bar, mid, left_up, left_dowm, right_up, right_down } from "../resource/echarts";

export default {
  //定义组件，注册组件
  components: {
    head2Style,
    headStyle,
    foodStyle,
    titleStyle,
  },
  //定义变量
  data() {
    return {
      stu_id: [],//学生的id
      stu_name: [],//学生的名字
      stu_class: [],//学生的班级
      class:[],//去重班级
      num:[],//班级人数
      piedata: [],//班级的总人数
      sxzz:[],//综合素质
      sum:0
    };
  },
  methods: {
    gotoLogin(){
      this.$router.push("/login")
    },
    async getCountryData() {
      const res = await countryData();
      console.log("res:", res);

      res.data.data.forEach(item => {
            let index = this.piedata.findIndex(value => value.name == item.stu_class)
            index === -1 ? this.piedata.push({ value: 1, name: item.stu_class }) : this.piedata[index].value++
          })

      this.piedata.forEach(item =>{
          this.num.push(item.value),
          this.class.push(item.name)
      })

      res.data.data.forEach((item) => {
        this.stu_id.push(item.stu_id),
        this.stu_name.push(item.stu_name),
        this.stu_class.push(item.stu_class)
      });
    },
// ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
    async getData2() {
      const res2 = await Data2();
      console.log("res2:", res2);
      res2.data.data.forEach(item => {
        this.sxzz.push(item.sxzz)
      })
      console.log("this.sxzz:", this.sxzz);
      
      let obj = {};
      res2.data.data.forEach(v=>{
        if (obj.hasOwnProperty(v.stu_name)) {
          obj[v.stu_name] += v.sxzz
        } else{
          obj[v.stu_name] = v.sxzz
        }
})

        console.log("this.sum:", obj);
      
    },

        



    

    
    bars() {
      mid({
        dom:"center-bottom",
        data: this.stu_id,
      });

      left_up({
        dom:"l-t-content",
        ydata: this.num,
        xdata: this.class,
      });
      left_dowm({
        dom:"l-b-content",
        data: this.piedata,
      });
      right_up({
        dom:"r-t-content",
        ydata1: this.stu_id,
      });
      right_down({
        dom:"r-b-content",
        ydata1: this.stu_id,
      });
    },
  },

  //加载页面的时候触发的方法
  async mounted() {
    await this.getCountryData();
    await this.getData2();
    this.bars();
  },
};
</script>

<style lang="less" scoped>
#box1 {
  width: 100vw;
  height: 100vh;
  background: url("../assets/职教桥项目图片/bcg.png");
  background-size: 100% 100%;
  #top {
    width: 100vw;
    height: 7vh;
    display: flex;
    justify-content: space-between;
    //background-color: aquamarine;
    padding: 1.5vh 2vh;
    #top-left {
      width: 10vw;
      height: 4vh;
      background-color: aquamarine;
    }
    #top-center {
      width: 16vw;
      height: 4vh;
      //background-color: aquamarine;
      background: url("../assets/职教桥项目图片/title.png");
      background-size: 100% 100%;
      color: white;
      font-size: 20px;
      display: flex;
      justify-content: center; //字体内容左右居中
      align-items: center; //字体内容上下居中
    }
    #top-right {
      width: 16vw;
      height: 4vh;
      background-color: aquamarine;
    }
  }
  #bottom {
    width: 100vw;
    height: 93vh;
    display: flex;
    justify-content: space-between;
    #left {
      width: 27vw;
      height: 93vh;
      //background-color: antiquewhite;
      padding: 1vh;
      #left-top {
        width: 26vw;
        height: 48vh;
        background-color: rgba(0, 150, 250, 0.1);

        #l-t-head {
          width: 26vw;
          height: 4vh;
          //background-color: aqua;
          display: flex;
          justify-content: space-between;
        }
        #l-t-content {
          width: 26vw;
          height: 41vh;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap; //铺满一行后自动换行
          .l-t-pic {
            width: 12.9vw;
            height: 20.4vh;
            padding: 1vh;
            //background-color: aliceblue;
            .title {
              width: 12.9vw;
              height: 2vh;
            }
            .pic {
              width: 12.9vw;
              height: 18.4vh;
            }
          }
        }
        #l-t-food {
          width: 26vw;
          height: 3vh;
        }
      }
      #left-bottom {
        width: 26vw;
        height: 41vh;
        background-color: rgba(0, 150, 250, 0.1);
        margin: 2vh 0 0 0;
        #l-b-head {
          width: 26vw;
          height: 4vh;
          //background-color: aqua;
          display: flex;
          justify-content: space-between;
        }
        #l-b-content {
          width: 26vw;
          height: 34vh;
          #l-b-con-top {
            width: 26vw;
            height: 22vh;
            display: flex;
            justify-content: space-between;

            .l-b-con-p {
              width: 12.5vw;
              height: 22vh;
              //background-color: aqua;
              .pic1 {
                width: 12.5vw;
                height: 20vh;
                //background-color: antiquewhite;
              }
            }
          }
          #l-b-con-bottom {
            width: 26vw;
            height: 12vh;
            //background-color:red;
          }
        }
        #l-b-food {
          width: 26vw;
          height: 3vh;
        }
      }
    }
    #center {
      width: 45vw;
      height: 93vh;
      //background-color: antiquewhite;
      padding: 1vh;
      #center-top {
        width: 44vw;
        height: 22vh;
        //background-color:rgba(0,150,250,0.1);
        background: url("../assets/职教桥项目图片/center-top.png");
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2vh;
        .C-T-t {
          width: 13vw;
          height: 12vh;
          //background-color: aqua;
          background: url("../assets/职教桥项目图片/center-item.png");
          background-size: 100% 100%;
        }
      }
      #center-bottom {
        width: 44vw;
        height: 67vh;
        background-color: rgba(0, 150, 250, 0.1);
        margin: 2vh 0 0 0;
        #c-b-head {
          width: 44vw;
          height: 4vh;
        }

        #c-b-content {
          width: 44vw;
          height: 60vh;
          //background-color: aliceblue;
        }
        #c-b-food {
          width: 44vw;
          height: 3vh;
        }
      }
    }
    #right {
      width: 27vw;
      height: 93vh;
      //background-color: antiquewhite;
      padding: 1vh;
      #right-top {
        width: 26vw;
        height: 60vh;
        background-color: rgba(0, 150, 250, 0.1);
        #r-t-head {
          width: 26vw;
          height: 4vh;
          //background-color: aqua;
          display: flex;
          justify-content: space-between;
        }
        #r-t-content {
          width: 26vw;
          height: 53vh;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .r-t-pic {
            width: 12.5vw;
            height: 17vh;
            //background-color: aquamarine;
            .pic2 {
              width: 12.5vw;
              height: 15vh;
              //background-color: aquamarine;
            }
          }
        }
        #r-t-food {
          width: 26vw;
          height: 3vh;
        }
      }
      #right-bottom {
        width: 26vw;
        height: 29vh;
        background-color: rgba(0, 150, 250, 0.1);
        margin: 2vh 0 0 0;
        #r-b-head {
          width: 26vw;
          height: 4vh;
          //background-color: aqua;
          display: flex;
          justify-content: space-between;
        }
        #r-b-content {
          width: 26vw;
          height: 22vh;
          display: flex;
          justify-content: space-between;
          .r-b-pic {
            width: 13vw;
            height: 22vh;
            .r-b-title {
              width: 100%;
              height: 2vh;
            }
            .r-b-pic {
              width: 100%;
              height: 20vh;
            }
          }
        }
        #r-b-food {
          width: 26vw;
          height: 3vh;
        }
      }
    }
  }
}
</style>